<template>
  <div>
    <!-- 弹出层表单 -->
     <el-dialog
      :title="data.form_title"
      v-model="data.dialogVisible"
      width="30%"
    >
      <zyj-form
        :formLabel="data.formLabel"
        :form="data.form"
      ></zyj-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 表格整体 -->
    <common-table
      :table-attrs="tableAttrs"
      @multiple="selectHandler"
      @controller="controllerHandler"
    >
      <template #default>
        <!-- 表格内搜索表单 -->
        <common-form
          :form-infos="searchForm"
          :form-attrs="{
            'label-width': 'auto',
            'label-position': 'left',
            size: 'small',
            inline: true,
          }"
          @submit="onSearchSubmit"
        />
        <el-button type="primary" size="small" @click="data.dialogVisible = !data.dialogVisible,data.form_title='添加商品参数'"
          >添加商品参数</el-button
        >
      </template>
      <!-- 表格展开信息 -->
      <template #expand="props">
        {{ props.props.row }}
      </template>
    </common-table>
   
  </div>
</template>

<script>
import { defineComponent, shallowReactive, ref ,reactive} from "vue";
import ZyjForm from '@/components/zyj/ZyjForm.vue'

export default defineComponent({
  name:'GoodsParameter',
  components:{
    ZyjForm
  },
  setup() {
    const data=reactive({
      form_title:'',
      formLabel:[
        {label:'商品参数名称',model:'goods_parameter_name',is_important:true},
        {label:'排序',model:'sort',type:'sort'},
      ],
      form:{
        goods_parameter_name:'',
        sort:0
      },
      dialogVisible:false
    })
    const tableAttrs = shallowReactive({
      // Table Attributes
      name: "表格标题",
      infos: ["商品参数用在添加或者编辑商品选择类型然后配置对应的商品参数。", "商品配置好对应的参数，前台用户可以根据分类关联的参数在搜索分类商品之后根据商品参数进行进一步的搜索。","商家也可添加自己店铺的类型和属性，平台端的商品参数和属性才能参与前台搜索。"],
      attrs: {
        data: [
          //表格需要的数据
          {
            date: "2016-05-02",
            goods_parameter_name: "王小虎",
            sort: "1",
          },
          {
            date: "2016-05-04",
            goods_parameter_name: "王小虎",
            sort: "2",
          },
          {
            date: "2016-05-01",
            goods_parameter_name: "王小虎",
            sort: "3",
          },
          {
            date: "2016-05-03",
            goods_parameter_name: "王小虎",
            sort: "4",
          },
        ],
        ref: "multipleTable",
        style: "100%",
      },
      // Table-column Attributes
      column: [
        {
          prop: "goods_parameter_name",
          label: "商品参数名称",
        },
        {
          prop: "sort",
          label: "排序",
        }
      ],
      // 操作按钮
      controller: ['管理','删除'],
    });

    //搜索表单配置
    const searchForm = shallowReactive([
      {
        id: 1,
        name: "CommonInput", //组件名
        prop: "s1", //搜索字段名
        value: "", //可以为 字符串、数组、数值根据组件绑定的类型来配置
        formItemAttrs: {
          //el-form-item 需要传入的 Form-Item Attributes
          label: "商品参数",
        },
        inputAttrs: {
          //表单组件需要传入的对应的 Attributes
          type: "text",
          placeholder: "请输入商品参数名称",
        },
      }
    ]);

   
    // 弹出层确定按钮
    const onSubmit= ()=> {
      console.log('提交');
    }

    //表格多选框触发
    const selectHandler = (val) => {
      console.log(val);
    };

    //表格操作按钮触发
    const controllerHandler = (type, row) => {
      console.log(type, row);
    };

    //搜索表单提交
    const onSearchSubmit = (data) => {
      console.log("search", data);
    };


    return {
      data,
      onSubmit,
      tableAttrs,
      searchForm,
      selectHandler,
      controllerHandler,
      onSearchSubmit,
    };
  },
});
</script>
